<template>
    <div>
        <h2>图表1</h2>
        <div class="chart1">
        </div>
    </div>
</template>
<script setup lang="ts">
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';
import http from '@/api/api';

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer
]);
type EChartsOption = echarts.EChartsCoreOption;
var option: EChartsOption;
onMounted(() => {
    // 接下来的使用就跟之前一样，初始化图表，设置配置项
    var chartDom = document.querySelector('.chart1')
    var myChart = echarts.init(chartDom);
    http('/chartDataOne').then(res => {
        let ydata = res.data.map(val => val.title)
        let xdata = res.data.map(val => val.num)

        option = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [89.3, 58212, '1'],
                    [57.1, 78254, '2'],
                    [74.4, 41032, '3'],
                    [50.1, 12755, '4'],
                    [89.7, 20145, '5'],
                    [68.1, 79146, '6'],
                    [19.6, 91852, '7'],
                    [10.6, 101852, '8'],
                    [32.7, 20112, '9']
                ]
            },
            xAxis: {
                type: "value",
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                }
            },
            yAxis: {
                type: "category",
                data: ydata,
                axisLine: {
                    lineStyle: {
                        color: "#fff"
                    }
                }
            },
            grid: {
                top: "3%",
                left: "2%",
                bottom: "3%",
                right: "6%",
                containLabel: true

            },
            series: [
                {
                    type: 'bar',
                    data: xdata,
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
    })
    
})
</script>
<style scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;

}

.chart1{
    /* 高度360 */
    height: 4.5rem;
    /* background-color: gray; */
}
</style>